
  <template>
  <div class="bf-commont-template">
    <!--考勤月报表-->

    <div class="clearfix bf-top-button">
      <div class="float-l">
        <el-button @click="buildMonthCount" type="primary">生成月报表</el-button>
        <el-button @click="exportExcle" type="primary">导出</el-button>
        <!-- <el-button @click="reback" type="primary">返回</el-button> -->
      </div>
      <div class="float-r">
        <div class="float-l">
          <el-input placeholder="请输入员工姓名搜索内容" prefix-icon="el-icon-search" v-model="searchData" @keyup.enter.native="quickSearch"></el-input>
        </div>
        <div class="float-l padding-l">
          <el-button @click="showSearch" type="primary">高级筛选</el-button>
        </div>
      </div>
    </div>
    <!-- 高级搜索 -->
    <bf-table-search :editForm='listDetailSetting' :title="'高级搜索'" ref='searchRosterRef' @formSubmit='searchRosterSubmit'></bf-table-search>

    <bf-table :data="userData" :setting="listDetailSetting"   @pageChange="pageChange" :editRules="editRules" ref="table"></bf-table>
    <!-- select month -->
    <bf-table-edit :title="'选择月份'" :editForm ='monthSelect' ref='monthSelectRef' @formSubmit='monthSelectSubmit' ></bf-table-edit>
  </div>
</template>

<script>
import { listDetailSetting, monthSelect } from './table.setting.js'
import { getList, generatorMonthDataApi } from './api.js'

export default {
  data() {
    return {
      monthSelect: monthSelect,
      searchData: '',
      userData: {
      },
      rowAction: [

      ],
      listDetailSetting: listDetailSetting,
      editRules: {
        name: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20个字符', trigger: 'blur' }
        ],
        roleName: [
          { required: true, message: '请输入用户角色', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20个字符', trigger: 'blur' }
        ]
      },
      searchParams: { // 搜索条件
        page: 1
      }
    }
  },
  mounted: function() {
    this.searchList()
  },
  methods: {
    searchList() {
      const pageParams = this.searchParams
      getList(pageParams).then((response) => {
        this.userData = response
      })
    },
    pageChange(pageObj) { // 分页切换
      this.searchParams.page = pageObj.page
      this.searchParams.pageSize = pageObj.pageSize
      this.searchList()
    },
    showSearch() { // 展示高级搜索
      this.$refs.searchRosterRef.show()
    },
    quickSearch() { // 快捷搜索
      this.searchParams.page = 1
      this.searchParams.employeeName = this.searchData
      this.searchList()
    },
    searchRosterSubmit(form) { // 高级搜索
      this.searchParams.page = 1
      this.searchParams.attendanceMonth = form.attendanceMonth
      this.searchParams.employeeName = form.employeeName
      this.searchParams.employeeNo = form.employeeNo

      this.searchList()
      this.$refs.searchRosterRef.hiden()
    },
    exportExcle() { // 导出
      this.$message({
        message: '导出功能正在开发中，敬请期待',
        type: 'warning'
      })
    },
    buildMonthCount() { // 生成月报表
      this.$refs.monthSelectRef.show({})
    },
    monthSelectSubmit(form) {
      const params = {
        attendanceMonth: form.attendanceMonth
      }
      generatorMonthDataApi(params).then(response => {
        if (response.success) {
          this.$message({
            message: '月报表数据生成成功',
            type: 'success'
          })
          this.$refs.monthSelectRef.hidden()
          this.searchList()
        }
      })
    }
  },

}
</script>

<style scoped>

</style>
